<template>
  <!-- 城市选择 -->
  <div v-if="showType">
    <Header :currentCity="currentCity" :cityList="cityList" :cityChangeShow="false" :loginShow="false"></Header>
    <div class="index-banner">
      <img src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20220228/01192dd0201f4108b0a33e0cb84b150c.webp" alt="" title="" />
    </div>
    <div class="index-jumpCurrentCity">
      <a :href="currentCity.prefixUrlMain" class="jump-btn">根据您当前位置：推荐进入✖✖✖✖✖✖✖✖✖✖【{{currentCity.cityNameMain}}站】</a>
    </div>
    <div class="index-hot-city">
      <div class="index-hot-city-center">
        <div class="hot-city-list">
          <dl>
            <dt>热门城市</dt>
            <dd>
              <a href="https://sh.mfgjw.com">上海✖✖✖✖✖✖✖✖✖✖</a>
              <a href="https://cq.mfgjw.com">重庆✖✖✖✖✖✖✖✖✖✖</a>
              <a href="https://cd.mfgjw.com">成都✖✖✖✖✖✖✖✖✖✖</a>
              <a href="https://jx.mfgjw.com">嘉兴✖✖✖✖✖✖✖✖✖✖</a>
            </dd>
            <dd class="more" @click="citysMoreChange">{{citysMoreText}}</dd>
          </dl>
        </div>
        <div class="index-city-list" v-show="citysMoreShow">
          <ul>
            <li v-for="(item, index) in queryOpenCityData" :key="index">
              <h3 class="cityqy">{{item.letter}}</h3>
              <div class="citylb">
                <dl v-for="(ite, ind) in item.provinces" :key="ind">
                    <dt>{{ite.name}}</dt>
                    <dd>
                      <a v-for="(v, i) in ite.citys" :key="i" :href="`https://${v.aliases}.mfgjw.com`">{{v.shortName}}</a>
                    </dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="index-zoushi">
      <h2 class="zoushi-title">热门城市房价走势</h2>
      <ul class="zoushi-ul">
        <li v-for="item,index in queryOpenCityListByTjData" :key="index">
          <a :href="`https://${item.aliases}.mfgjw.com`" target="_blank" class="clear">
            <div class="ct">{{item.shortName}}<p>{{parseInt(item.avgHousePrice)}}<span>元/㎡</span></p></div>
          </a>
          <div class="zst">
            <a :href="`https://${item.aliases}.mfgjw.com`" target="_blank">在售楼盘{{item.sumHouseNum}}套 &gt;</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="index-house-news">
      <div class="index-house-center">
        <h2 class="index-house-title">
          <span>全国楼盘资讯</span>
          <i>即时更新发布全国热门城市楼市新闻资讯</i>
        </h2>
        <div class="house-news-content">
          <div class="house-news-banner">
            <el-carousel height="472px">
              <el-carousel-item v-for="(item, index) in queryHouseNewData[9]" :key="index">
                <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" class="house-news-banner-inline pic" :title="item.title">
                  <el-image :src="item.imgUrl" :alt="item.title" fit="cover" style="width: 100%;height: 100%;"></el-image>
                  <p class="banner-small">{{item.title}}</p>
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="house-news-list">
            <div class="house-news-list-tab">
              <a href="javascript: void(0);" @click="newsTabIndex=6" :class="newsTabIndex==6?'active':''">热搜头条</a>
              <a href="javascript: void(0);" @click="newsTabIndex=10" :class="newsTabIndex==10?'active':''">今日更新</a>
            </div>
            <ul class="house-news-list-item">
              <li v-for="(item, index) in queryHouseNewData[6]" :key="index" v-show="newsTabIndex==6">
                <em>{{index+1}}</em>
                <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
              </li>
              <li v-for="(item, index) in queryHouseNewData[10]" :key="(index+10)" v-show="newsTabIndex==10">
                <em>{{index+1}}</em>
                <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
              </li>
            </ul>
            <el-button type="primary" class="news-list-replace" @click="replaceChange(newsTabIndex)">换一换</el-button>
          </div>
        </div>
        <div class="popularity-content">
          <div class="popularity-left">
            <h5 class="popularity-title">
              <div>人气<span>排行</span></div>
              <p>POPULARITY RANKING</p>
            </h5>
            <ul class="popularity-left-list">
              <li v-for="(item, index) in queryHouseNewData[5]" :key="index">
                <em>{{index+1}}</em>
                <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
              </li>
            </ul>
          </div>
          <div class="popularity-center">
            <div class="popularity-center-tab">
              <p v-for="(item, index) in popularityTabs" :key="index" :class="popularityTabsIndex==(index+1)?'active':''" @click="popularityTabsChange(index+1)">{{item}}</p>
            </div>
            <ul class="popularity-center-list">
              <li v-for="(item, index) in queryHouseNewData[popularityTabsIndex]" :key="index">
                <div class="cover">
                  <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" class="pic" :title="item.title">
                    <el-image :src="item.imgUrl" :alt="item.title" fit="cover" lazy style="width: 100%;height: 100%;"></el-image>
                  </a>
                </div>
                <div class="item">
                  <h4>
                    <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
                  </h4>
                  <p class="desc">{{item.subTitle}}</p>
                  <div class="date">{{item.createdTimeNow}}</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="popularity-right">
            <h5 class="popularity-title">
              <div>独家<span>专题</span></div>
              <p>EXCLUSIVE THEME</p>
            </h5>
            <ul class="popularity-right-list">
              <li v-for="(item, index) in queryHouseNewData[7]" :key="index">
                <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{index+1}}、{{item.title}}</a>
              </li>
            </ul>
            <div style="height: 40px;"></div>
            <h5 class="popularity-title">
              <div>小编<span>精选</span></div>
              <p>CLASSIC ARTICLES</p>
            </h5>
            <ul class="popularity-right-list">
              <li v-for="(item, index) in queryHouseNewData[8]" :key="index">
                <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{index+1}}、{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="index-shop">
      <div class="index-shop-center">
        <h2 class="index-house-title">
          <span>热盘导购</span>
          <i>热门的楼盘导购</i>
        </h2>
        <div class="shop-content">
          <div class="cover">
            <a :href="`/lpxq/${queryHouseHotNewsFirstData.estateId}.html`" :title="queryHouseHotNewsFirstData.title" class="pic">
              <el-image :src="queryHouseHotNewsFirstData.imgUrl" :alt="queryHouseHotNewsFirstData.title" fit="cover" lazy style="width: 100%;height: 100%;"></el-image>
              <p class="small">{{queryHouseHotNewsFirstData.title}}</p>
            </a>
          </div>
          <ul class="cover-item">
            <li v-for="(item, index) in queryHouseHotNewsData" :key="index">
              <a :href="`/lpxq/${item.estateId}.html`" :title="item.title">{{item.title}}</a>
              <p>{{item.createdTimeNow}}</p>
            </li>
          </ul>
          <div class="shop-contet-right">
            <h5 class="popularity-title">
              <div>推荐<span>好房</span></div>
              <p>RECOMMENDED ARTICLES</p>
            </h5>
            <ul class="popularity-right-list">
              <li v-for="(item, index) in queryHouseHotNewsData2" :key="index">
                <a :href="`/lpxq/${item.estateId}.html`" :title="item.title">{{index+1}}、{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px;"></div>
    <Footer :currentCity="currentCity"></Footer>
  </div>
  <!-- 首页 -->
  <div v-else>
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <div class="middle">
      <!-- 大图 -->
      <div class="banner">
        <img
          src="https://s1.ax1x.com/2022/12/28/pSSVztg.jpg"
          style="width: 100%"
        />
        <div class="search_wrap">
          <div class="inp_wrap">
            <input
              class="banner_inp julive_comjia_pc_search_project_input julive_search_project"
              maxlength="70"
              type="text"
              data-target="_blank"
              v-model="search"
              @focus="searchStyle = 'display: block'"
              @input="searchChange"
              placeholder="请输入楼盘名称、区域"
            />
            <button class="banner_btn" @click="searchBtn">开始找房</button>
          </div>
          <div class="s-list-wrap-new" :style="searchStyle">
            <div class="default-list" style="display: block">
              <div class="search-hotList-wrap" v-if="hotSearchState">
                <div class="hot-search-wrap">
                  <!--热门搜索开始-->
                  <div class="hot-box">
                    <div class="tip">
                      <span>热门搜索</span>
                    </div>
                    <ul class="s-list-new clearfix">
                      <li v-for="(item, index) in searchLabelList" :key="index">
                        <a class="hot" :href="item.href" target="_self">
                          {{
                          item.name
                          }}
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!--搜索列表开始-->
              <div class="search-list-wrap" v-if="searchChangeState">
                <div class="tip search-tips">
                  <span>
                    为您找到与“
                    <span>{{ search }}</span>”有关的新房
                  </span>
                </div>
                <!--暂无数据开始-->
                <div class="no-data-search" v-show="searchListShow">
                  <p>未找到符合您条件的搜索内容</p>
                </div>
                <!--暂无数据结束-->
                <div class="search-list-header">
                  <ul>
                    <li class="clearfix" v-for="(item, index) in searchList" :key="index">
                      <a
                        target="_self"
                        class="clearfix"
                        :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                      >
                        <div class="search-list-left">
                          {{ item.name
                          }}
                          <span>{{ item.regionName || "" }}</span>
                        </div>
                        <div class="search-list-right">
                          <span>
                            {{
                            item.meterPrice
                            ? `单价约${item.meterPrice}元/m²`
                            : "售价待定"
                            }}
                          </span>
                          <span class="button" :class="item.saleStatusClass">
                            {{
                            item.saleStatus == 0
                            ? "待售"
                            : item.saleStatus == 1
                            ? "在售"
                            : "售罄"
                            }}
                          </span>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <!--搜索列表结束-->
            </div>
          </div>
        </div>
      </div>
      <!-- 副导航 -->
      <div class="part brand">
        <div class="part_con clearfix">
          <ul class="brand_wrap clearfix">
            <li class="brand_box brand_01" v-for="(item, index) in brand" :key="index">
              <a
                class="part-a"
                :href="item.href ? prefixUrl + item.href : 'javascript:;'"
                :target="item.href ? '_blank' : '_self'"
                :style="`background: url(${item.url}) bottom left / 100% no-repeat;`"
                @click="partJump(item)"
              >
                <i
                  class="part-a-i"
                  :style="`background: url(${item.icon}) center / auto 82px no-repeat;`"
                ></i>
                <p class="part-a-p">{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 优质房源 -->
      <div class="part quality clearfix">
        <div class="part_con">
          <div class="part_hd clearfix">
            <div class="part_tit">
              <span>优质房源</span>
            </div>
            <div class="part_tit_R fl">
              <ul class="part-tabs">
                <li v-for="(item, index) in yzfyTabs" :key="index" @mouseover="yzfyChange(index, item.id)" :class="yzfyIndex==index?'on':''">{{item.name}}</li>
              </ul>
            </div>
          </div>
          <div class="part_bd clearfix">
            <div class="part-li-list">
              <ul>
                <li v-for="(houseIte, houseInd) in yzfyTabs[yzfyIndex].list" :key="houseInd">
                  <a
                    :href="`${prefixUrl}/lpxq/${houseIte.estateId}.html`"
                    :title="houseIte.name"
                    class="part-list-a pic"
                  >
                    <img
                      :src="houseIte.imgUrl"
                      :alt="houseIte.name"
                      style="width: 100%; height: 100%"
                    />
                    <div class="part-list-box">
                      <div class="part-list-info">
                        <p class="btitle">{{ houseIte.name }}</p>
                        <p class="bprice">
                          单价约：{{
                          houseIte.meterPrice
                          ? `${houseIte.meterPrice}元/㎡`
                          : "售价待定"
                          }}
                        </p>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="part-li-list-more">
              <a :href="`${prefixUrl}${yzfyHref}`" target="_blank">更多优质房源</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 热门好盘 -->
      <div id="julive-pc-index-ajax-rank">
        <div class="part gray_bg">
          <div class="part_con">
            <div class="part_hd clearfix">
              <div class="part_tit">
                <span>热门好盘</span>
              </div>
              <div class="part_tit_R">
                <div class="tab_wrap">
                  <span :class="rankingType == 1 ? 'active' : ''" @click="rankingType = 1">人气榜单</span>
                  <span :class="rankingType == 2 ? 'active' : ''" @click="rankingType = 2">热搜榜单</span>
                  <span :class="rankingType == 3 ? 'active' : ''" @click="rankingType = 3">热销榜单</span>
                </div>
              </div>
            </div>
            <div class="part_bd">
              <!-- 人气榜单 -->
              <div
                class="rank_wrap clearfix"
                :style="{ display: rankingType == 1 ? 'block' : 'none' }"
              >
                <a
                  v-for="(item, index) in topList.rqList"
                  :key="index"
                  :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                  class="rank_box"
                >
                  <div class="pic">
                    <el-image
                      :src="item.url"
                      class="lazy-timeout-click"
                      :alt="item.name"
                      :title="item.name"
                      lazy
                    ></el-image>
                    <div class="build_label">{{ index == 0 ? "榜首" : `TOP${index + 1}` }}</div>
                  </div>
                  <div class="rank_name">{{ item.name }}</div>
                  <div class="rank_site">{{ item.shortRegionName }}</div>
                  <div class="rank_info clearfix has-hint-icon">
                    <div class="rank_info_L">
                      建面 :
                      {{
                      item.area && item.areaMax
                      ? `${item.area}-${item.areaMax}㎡`
                      : "待定"
                      }}
                    </div>
                    <div class="rank_info_R">
                      {{
                      item.meterPrice ? `${item.meterPrice}元/m²` : "售价待定"
                      }}
                    </div>
                  </div>
                </a>
              </div>
              <!-- 热搜榜单 -->
              <div
                class="rank_wrap clearfix"
                :style="{ display: rankingType == 2 ? 'block' : 'none' }"
              >
                <a
                  v-for="(item, index) in topList.ryList"
                  :key="index"
                  :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                  class="rank_box"
                >
                  <div class="pic">
                    <el-image
                      :src="item.url"
                      class="lazy-timeout-click"
                      :alt="item.name"
                      :title="item.name"
                    ></el-image>
                    <div class="build_label">{{ index == 0 ? "榜首" : `TOP${index + 1}` }}</div>
                  </div>
                  <div class="rank_name">{{ item.name }}</div>
                  <div class="rank_site">{{ item.shortRegionName }}</div>
                  <div class="rank_info clearfix has-hint-icon">
                    <div class="rank_info_L">
                      建面 :
                      {{
                      item.area && item.areaMax
                      ? `${item.area}-${item.areaMax}㎡`
                      : "待定"
                      }}
                    </div>
                    <div class="rank_info_R">
                      {{
                      item.meterPrice ? `${item.meterPrice}元/m²` : "售价待定"
                      }}
                    </div>
                  </div>
                </a>
              </div>
              <!-- 热销榜单 -->
              <div
                class="rank_wrap clearfix"
                :style="{ display: rankingType == 3 ? 'block' : 'none' }"
              >
                <a
                  v-for="(item, index) in topList.xsList"
                  :key="index"
                  :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                  class="rank_box"
                >
                  <div class="pic">
                    <el-image
                      :src="item.url"
                      class="lazy-timeout-click"
                      :alt="item.name"
                      :title="item.name"
                    ></el-image>
                    <div class="build_label">{{ index == 0 ? "榜首" : `TOP${index + 1}` }}</div>
                  </div>
                  <div class="rank_name">{{ item.name }}</div>
                  <div class="rank_site">{{ item.shortRegionName }}</div>
                  <div class="rank_info clearfix has-hint-icon">
                    <div class="rank_info_L">
                      建面 :
                      {{
                      item.area && item.areaMax
                      ? `${item.area}-${item.areaMax}㎡`
                      : "待定"
                      }}
                    </div>
                    <div class="rank_info_R">
                      {{
                      item.meterPrice ? `${item.meterPrice}元/m²` : "售价待定"
                      }}
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div class="part_tip">
              <i class="el-icon-warning-outline"></i>
              榜单推荐由✖✖✖✖✖✖✖✖✖✖数据统计得出，仅供参考。
            </div>
          </div>
        </div>
      </div>
      <!-- 楼盘资讯 -->
      <div class="blockwrap">
        <div class="mainwrap">
          <div class="blocktop">
            <label class="fl">楼盘资讯</label>
            <div class="blocktop-list">
              <a :href="`${prefixUrl}/lpzx/hyxw/`" target="_blank">行业新闻</a>
              <a :href="`${prefixUrl}/lpzx/lpdt/`" target="_blank">楼盘动态</a>
              <a :href="`${prefixUrl}/lpzx/lpbk/`" target="_blank">楼盘百科</a>
              <a :href="`${prefixUrl}/lpzx/rmtj/`" target="_blank">热门推荐</a>
            </div>
          </div>
          <div class="newsContent">
            <div class="newsContent-left" v-show="newsListLeftCover">
              <div class="newsContent-left-cover">
                <a :href="`${prefixUrl}/lpzxxq/${newsListLeftCover.id}.html`" :title="newsListLeftCover.title">
                  <el-image :src="newsListLeftCover.images" :alt="newsListLeftCover.title" fit="cover" style="width: 100%;height: 100%;"></el-image>
                  <p class="title">
                    <span>{{newsListLeftCover.title}}</span>
                  </p>
                </a>
              </div>
              <div class="newsContent-left-list">
                <ul>
                  <li v-for="(item, index) in newsListLeft" :key="index">
                    <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
                    <span class="date">{{item.addTimeNow}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="newsContent-right">
              <ul class="newsContent-right-list">
                <li v-for="(item, index) in newsListRight" :key="index">
                  <div class="right-list-cover pic">
                    <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">
                      <el-image :src="item.images" :alt="item.title" fit="cover" style="width: 100%;height: 100%;"></el-image>
                    </a>
                  </div>
                  <div class="right-list-item">
                    <h3>
                      <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
                    </h3>
                    <div class="desc">
                      <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">{{item.subtitle}}</a>
                    </div>
                    <div class="date">
                      <a :href="`${prefixUrl}/lpzxxq/${item.id}.html`" :title="item.title">发布时间：{{item.addTimeNow}}</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 关键区域，街道，周边 -->
          <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 购房返现弹窗 -->
    <el-dialog
      width="580px"
      custom-class="popup-cash-back"
      :visible.sync="cashBackShow"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="popup-cash-back-head">
        <img
          src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211022/a3c5a9f6beac40bea115445cf39d9a4b.png"
          style="width: 100%"
        />
        <ul class="popup-top-text">
          <li style="width: 68px; text-align: right">用户注册</li>
          <li style="width: 135px">规划解读+大数据分析</li>
          <li style="width: 90px">免费专车看房</li>
          <li style="width: 98px; text-align: center">成功买新房</li>
          <li style="width: 80px; text-align: center">返现金</li>
        </ul>
      </div>
      <div class="popup-form">
        <div class="popup-form-inline">
          <el-input type="text" maxlength="11" v-model="popupPhone" placeholder="请输入您的手机号"></el-input>
          <el-button
            type="danger"
            class="popup-get-code"
            :disabled="phoneCodeDisabled"
            @click="getPhoneCode"
          >{{ codeText }}</el-button>
        </div>
        <div class="popup-form-inline">
          <el-input type="text" maxlength="6" v-model="popupCode" placeholder="请输入验证码"></el-input>
        </div>
        <div class="popup-form-inline">
          <el-button
            type="danger"
            class="popup-subscribe"
            :disabled="subscribeDisabled"
            @click="subscribeSub"
          >预约咨询返现详情</el-button>
        </div>
        <div class="popup-form-inline" style="margin-bottom: 0">
          <strong class="popup-phone-notice">热线电话：{{currentCity.t400Num}}</strong>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var head = {
  title: '',
  content: '',
  keywords: '',
}
import u from '@/plugins/Ccom'
/**
 * @param {String} host 自身域名
 * @param {String} goodType 9583311,9583312,9583313,9583314,9583315,9583316  教育地产，景观地产，现房，地铁房，小户型，品牌地产
 * @param {Number} pageNum 当前页数
 * @param {Number} pageSize 每页显示多少条
 */
async function getQueryHouseInfoGoodList(host, goodType, pageNum, pageSize) {
  return u.http({
    url: '/pc/houseInfoGood/queryHouseInfoGoodList',
    params: {
      host,
      goodType,
      pageNum,
      pageSize,
    },
  })
}
/**
 * @param {Number} type 1热点2购房指导3楼市周刊4看房日记5人气排行6热搜头条7独家专题8小编精选9轮播图
 * @param {Number} pageNum 当前页数
 * @param {Number} pageSize 每页显示多少条
 */
async function getQueryHouseNewList(type, pageNum, pageSize) {
  return u.http({
    url: '/pc/new/queryHouseNew',
    params: {
      type,
      pageNum,
      pageSize
    }
  })
}
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
        { name: 'baidu-site-verification', content: "code-9beHqKh2vs" },
        { name: 'baidu-site-verification', content: "code-xiFmj2hScy" },
      ],
      link: [{ rel: 'stylesheet', href: '/css/index.css' }],
    }
  },
  async asyncData(ctx) {
    // ctx.req.headers.host = 'www.mfgjw.com'
    // 展示城市选择还是首页
    var showType = (ctx.req.headers.host == 'www.mfgjw.com' || ctx.req.headers.host == 'mfgjw.com') ? true : false
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var yzfyTabs = [{
      id: '9583311',
      name: '教育地产',
      list: []
    }, {
      id: '9583312',
      name: '景观地产',
      list: []
    }, {
      id: '9583313',
      name: '现房',
      list: []
    }, {
      id: '9583314',
      name: '地铁房',
      list: []
    }, {
      id: '9583315',
      name: '小户型',
      list: []
    }, {
      id: '9583316',
      name: '品牌地产',
      list: []
    }]
    var yzfyIndex = 0;
    var yzfyHref = '/yzfy/9583311.html'
    var cityList = ctx.cityList
    var topList = []
    var newsListLeft = [];
    var newsListLeftCover = {};
    var newsListRight = [];
    var cityCode = ctx.currentCity.cityCode || '' //城市Code
    var searchLabelList = [
      {
        name: '万科',
        href: '/lpcx/o1',
      },
      {
        name: '返现',
        href: '/lpcx/o2',
      },
      {
        name: '交通便利',
        href: '/lpcx/o3',
      },
      {
        name: '免费专车',
        href: '/lpcx/o4',
      },
      {
        name: '学区房',
        href: '/lpcx/o5',
      },
      {
        name: '融创',
        href: '/lpcx/o6',
      },
      {
        name: '医院',
        href: '/lpcx/o7',
      },
    ]
    var queryOpenCityData = []
    var queryHouseNewData = []
    var pages = 10
    var queryHouseHotNewsData = []
    var queryHouseHotNewsFirstData = {}
    var queryHouseHotNewsData2 = []
    var queryOpenCityListByTjData = []

    // 获取全国楼盘资讯
    for (let i=1; i<=10; i++) {
      // 控制条数
      let _pageSize = 10
      switch(i) {
        case 1: _pageSize = 5; break;
        case 2: _pageSize = 5; break;
        case 3: _pageSize = 5; break;
        case 4: _pageSize = 5; break;
        case 5: _pageSize = 8; break;
        case 6: _pageSize = 7; break;
        case 7: _pageSize = 7; break;
        case 8: _pageSize = 7; break;
        case 9: _pageSize = 2; break;
        case 10: _pageSize = 7; break;
      }
      let getQueryHouseNewListRes = await getQueryHouseNewList(i, 1, _pageSize)
      getQueryHouseNewListRes.data.list.forEach(item => {
        item.createdTimeNow = item.createdTime ? u.formatTime(item.createdTime, 'Y-m-d') : ''
        item.subTitle = item.content.replace(new RegExp(/<.*?>/, 'gi'), '')
      })
      // 处理换一换页数
      if (i == 6) {
        pages = pages < getQueryHouseNewListRes.data.pages ? pages : getQueryHouseNewListRes.data.pages
      }
      if (i == 10) {
        pages = pages < getQueryHouseNewListRes.data.pages ? pages : getQueryHouseNewListRes.data.pages
      }
      queryHouseNewData[i] = getQueryHouseNewListRes.data ? getQueryHouseNewListRes.data.list : []
    }
    // 获取热盘导购
    let getQueryHouseHotNews = await u.http({
      url: '/pc/hotNew/queryHouseHotNews',
      params: {
        type: 1,
        pageNum: 1,
        pageSize: 8
      }
    })
    if (getQueryHouseHotNews.code == 200) {
      getQueryHouseHotNews.data.list.forEach((item, index) => {
        item.createdTimeNow = u.formatTime(item.createdTime, 'd-m')
        if (index < 1) {
          queryHouseHotNewsFirstData = item
        }
        if (index > 0) {
          queryHouseHotNewsData.push(item)
        }
      })
    }
    // 推荐好房
    let getQueryHouseHotNews2 = await u.http({
      url: '/pc/hotNew/queryHouseHotNews',
      params: {
        type: 2,
        pageNum: 1,
        pageSize: 7
      }
    })
    if (getQueryHouseHotNews2.code == 200) {
      queryHouseHotNewsData2 = getQueryHouseHotNews2.data ? getQueryHouseHotNews2.data.list : []
    }
    // 获取开通城市重组
    let getQueryOpenCity = await u.http({
      url: '/pc/city/queryOpenCity'
    })
    if (getQueryOpenCity.code == 200) {
      queryOpenCityData = getQueryOpenCity.data
    }
    // 修改页面TDK
    let cityName = currentCity.cityName
    head.content = `${cityName}✖✖✖✖✖✖✖✖✖✖为您提供${cityName}新房，${cityName}新开楼盘，${cityName}房价信息，让您及时了解${cityName}新房楼盘房价价格趋势及预测，查找真实优质的${cityName}新房房源信息，欢迎咨询致电${currentCity.t400Num}.`

    head.title = `${cityName}✖✖✖✖✖✖✖✖✖✖-${cityName}新房-${cityName}楼盘-专业房屋买卖平台`
    head.keywords = `${cityName}新房，${cityName}新楼盘，${cityName}新房出售，${cityName}新开楼盘`
    head.content = `${cityName}✖✖✖✖✖✖✖✖✖✖为用户提供找房信息。包括${cityName}二手房、新房、${cityName}楼盘、问答等，挑好房就上${cityName}✖✖✖✖✖✖✖✖✖✖房地产信息网`

    // 获取优质房源
    for (let i in yzfyTabs) {
      let getRes = await getQueryHouseInfoGoodList(ctx.req.headers.host, yzfyTabs[i].id, 1, 8)
      yzfyTabs[i].list = getRes.data ? getRes.data.list : [];
    }

    // 获取热门好盘
    let getTopData = await u.http({
      url: '/pc/ranking/queryRankingListBySize',
      params: {
        host: ctx.req.headers.host,
        pageSize: 4,
      },
    })
    if (getTopData.code == 200) {
      topList = getTopData.data
    }

    // 获取楼盘资讯
    let getNewsData = await u.http({
      url: '/app/new/queryNewList',
      params: {
        cityCode,
        host: ctx.req.headers.host,
        pageSize: 10,
      },
    })
    if (getNewsData.code == 200) {
      getNewsData.data.list.forEach((item, index) => {
        item.addTimeNow = u.formatTime(item.addTime, 'Y-m-d')
        // 修改咨询类型 1行业新闻，2楼盘动态，3楼盘百科，4热门推荐
        switch(item.newsType) {
          case 1:
            item.newsTypeName = '行业新闻'
            break;
          case 2:
            item.newsTypeName = '楼盘动态'
            break;
          case 3:
            item.newsTypeName = '楼盘百科'
            break;
          case 4:
            item.newsTypeName = '热门推荐'
            break;
        }
        // 左边第1条
        if (index < 1) {
          newsListLeftCover = item
        }
        // 左边第2-6条
        if (index > 0 && index < 6) {
          newsListLeft.push(item)
        }
        // 右边第7-10条
        if (index > 5) {
          newsListRight.push(item)
        }
      })
    }
    // 获取热门城市房价走势
    let getFjzs = await u.http({
      url: '/pc/tjData/queryOpenCityListByTj'
    })
    if (getFjzs.code == 200) {
      queryOpenCityListByTjData = getFjzs.data
    }

    return {
      showType,
      prefixUrl,
      currentCity,
      cityList,
      cityCode,
      yzfyTabs,
      yzfyIndex,
      yzfyHref,
      topList,
      newsListLeft,
      newsListLeftCover,
      newsListRight,
      searchLabelList,
      queryOpenCityData,
      queryHouseNewData,
      pages,
      queryHouseHotNewsData,
      queryHouseHotNewsFirstData,
      queryHouseHotNewsData2,
      queryOpenCityListByTjData,
      regionList: ctx.regionList
    }
  },
  data() {
    return {
      searchStyle: 'display: none',
      rankingType: 1, // 人气榜单 热搜榜单 热销榜单
      search: '',
      searchChangeState: false,
      hotSearchState: true,
      brand: [
        {
          type: 1,
          url: 'https://s1.ax1x.com/2022/12/28/pSSZwjI.png',
          icon: 'https://s1.ax1x.com/2022/12/28/pSSKeSg.png',
          name: '我要找房',
          href: '/wyzf/',
        },
        // {
        //   type: 2,
        //   url: "https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211024/1480139cd0644ada93df1f316a1911ed.png",
        //   icon: "https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211024/cdf44fa4d1fa44f08709e9b0405240ab.png",
        //   name: "地图找房",
        //   href: "",
        // },
        {
          type: 2,
          url: 'https://s1.ax1x.com/2022/12/28/pSSZwjI.png',
          icon: 'https://s1.ax1x.com/2022/12/28/pSSKuOs.png',
          name: '你问我答',
          href: '/nwwd/',
        },
        {
          type: 3,
          url: 'https://s1.ax1x.com/2022/12/28/pSSZwjI.png',
          icon: 'https://s1.ax1x.com/2022/12/28/pSSKmlQ.png',
          name: '专车看房',
          href: '/mfzc/',
        },
        {
          type: 4,
          url: 'https://s1.ax1x.com/2022/12/28/pSSZwjI.png',
          icon: 'https://s1.ax1x.com/2022/12/28/pSSKnyj.png',
          name: '购房返现',
          href: '',
        },
      ],
      searchListShow: false,
      searchList: [],
      cashBackShow: false,
      downTime: 60,
      codeText: '发送验证码',
      popupPhone: '',
      popupCode: '',
      phoneCodeDisabled: false,
      subscribeDisabled: false,
      citysMoreShow: false,
      citysMoreText: '展开',
      newsTabIndex: 6,
      popularityTabs: ['热点', '购房指导', '楼市周刊', '看房日记'],
      popularityTabsIndex: 1,
    }
  },
  mounted() {
    // 监听页面上点击事件
    document.addEventListener('click', (e) => {
      if (e.target.offsetParent) {
        this.searchStyle =
          e.target.offsetParent.className != 'search_wrap' &&
          e.target.offsetParent.className != 's-list-wrap-new'
            ? 'display: none'
            : 'display: block'
      }
    })
  },
  methods: {
    // 展开收起开通城市
    citysMoreChange() {
      this.citysMoreShow = !this.citysMoreShow
      this.citysMoreText = this.citysMoreShow ? '收起' : '展开'
    },
    // 换一换
    async replaceChange(e) {
      let pageNum = Math.ceil(Math.random() * this.pages)
      let getQueryHouseNewListData = await getQueryHouseNewList(e, pageNum, 7)
      let queryHouseNewDataNow = []
      for (let i = 1; i < this.queryHouseNewData.length; i ++) {
        if (i == e) this.queryHouseNewData[i] = getQueryHouseNewListData.data ? getQueryHouseNewListData.data.list : []
        queryHouseNewDataNow[i] = this.queryHouseNewData[i]
      }
      this.queryHouseNewData = queryHouseNewDataNow
    },
    // 热点 购房
    popularityTabsChange(index) {
      this.popularityTabsIndex = index
    },
    // 修改优质房源切换属性
    yzfyChange(index, id) {
      this.yzfyIndex = index;
      this.yzfyHref = `/yzfy/${id}.html`;
    },
    // 搜索内容发生改变
    searchChange() {
      this.hotSearchState = this.search ? false : true
      this.searchChangeState = this.search ? true : false
      // 搜索
      u.http({
        client: true, // 开启客户端请求
        url: '/pc/houseInfo/querySearchHouseInfoList',
        params: {
          host: location.host,
          name: this.search,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.searchListShow = this.search && res.data.total < 1 ? true : false
          // 设置背景色
          res.data.list.forEach((item) => {
            item.saleStatusClass =
              item.saleStatus == 0 ? 'ds' : item.saleStatus == 1 ? 'zs' : 'sq'
          })
          this.searchList = res.data.list
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
        return false
      })
    },
    // 将搜索内容跳转到列表
    searchBtn() {
      location.href = this.search
        ? `${this.prefixUrl}/lpcx/?kwname=${this.search}`
        : `${this.prefixUrl}/lpcx/`
    },
    // 优质房源
    partJump(e) {
      let userInfo = localStorage.getItem('userInfo')
        ? JSON.parse(localStorage.getItem('userInfo'))
        : ''
      // 购房返现
      if (e.type == 4) {
        this.cashBackShow = true
        this.popupPhone = userInfo.mobile || ''
      }
    },
    // 获取验证码
    getPhoneCode() {
      if (this.popupPhone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.popupPhone)) {
        this.$message({
          message: '手机号格式不正确',
          type: 'warning',
        })
        return false
      }
      this.phoneCodeDisabled = true
      u.http({
        client: true,
        url: '/app/sms/loginCode',
        params: {
          phone: this.popupPhone,
          countryCode: '86',
        },
      }).then((res) => {
        if (res.code == 200) {
          let t = this.downTime
          this.codeText = `${t}s重新获取`
          let clearPhoneCode = setInterval((e) => {
            t--
            this.codeText = `${t}s重新获取`
            if (t <= 0) {
              clearInterval(clearPhoneCode)
              t = this.downTime
              this.codeText = '重新获取'
              this.phoneCodeDisabled = false
            }
          }, 1000)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.phoneCodeDisabled = false
        }
      })
    },
    // 关闭返现弹窗
    closeDialog() {
      this.popupPhone = ''
      this.popupCode = ''
    },
    // 预约咨询返现详情
    subscribeSub() {
      if (this.popupPhone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.popupPhone)) {
        this.$message({
          message: '手机号格式不正确',
          type: 'warning',
        })
        return false
      }
      if (this.popupCode == '') {
        this.$message({
          message: '请输入验证码',
          type: 'warning',
        })
        return false
      }
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/visitRecord/addPcVisitRecord',
        params: {
          phone: this.popupPhone,
          code: this.popupCode,
          clickType: 10,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.popupPhone = ''
          this.popupCode = ''
          this.subscribeDisabled = false
          this.cashBackShow = false
          this.$message({
            message: res.msg,
            type: 'success',
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
          this.subscribeDisabled = false
        }
      })
    },
  },
}
</script>